<template>
  <div>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;margin-top:0px;margin-bottom:5px;">
      <el-form :inline="true">
        <el-col :span="24">
          <div class="grid-content bg-purple-dark"></div>
          <el-form-item lable="险种代码" label-width="150px" :span="3">
            <el-input v-model="formData.riskcode" size="small" placeholder="险种代码"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button size="small" type="primary" @click="queryData()" icon="search">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button size="small" @click="reset()">
              <i class="fa fa-undo"></i>
              重置
            </el-button>
          </el-form-item>
        </el-col>

      </el-form>
    </el-col>

    <el-table :data="tableData" v-loading="loading" element-loading-text="处理中......" ref="multipleTable" border
              style="width: 100%;" :height="tableHeight" :highlight-current-row="true" @sort-change="orderBy"
              @selection-change="rowSelected" @row-dblclick="showDetail" @row-click="rowSelete">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="comcode" label="公司代码" sortable="custom" width="130"></el-table-column>
      <el-table-column prop="riskcode" label="险种代码" show-overflow-tooltip sortable="custom"
                       min-width="250"></el-table-column>
      <el-table-column prop="agentcode" label="代理人代码" show-overflow-tooltip min-width="250"></el-table-column>
      <el-table-column prop="ispolicypay" label="是否见费出单" show-overflow-tooltip min-width="130"
                       :formatter="defaultFormater"></el-table-column>
    </el-table>

    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;margin-top:0px;margin-bottom:5px;">
      <el-form :inline="true">
        <el-col :span="14">
          <el-col :span="24">
            <el-form-item>
              <el-button size="small" type="warning" @click="openAddDialog()" icon="plus">新增</el-button>
            </el-form-item>
            <el-form-item>
              <el-button size="small" type="primary" @click="openEditDialog()" icon="edit">修改</el-button>
            </el-form-item>
            <el-form-item>
              <el-button size="small" type="danger" @click="deleteData()" icon="delete">删除</el-button>
            </el-form-item>
          </el-col>
        </el-col>
        <el-col :span="10">
          <div class="block" style="float:right">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                           :current-page="formData.currentPage"
                           :page-sizes="[15, 30, 45]"
                           :page-size="formData.pageSize"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="total">
            </el-pagination>
          </div>
        </el-col>
      </el-form>
    </el-col>

    <PolicyPayAdd v-if="showAddDialog"></PolicyPayAdd>
    <PolicyPayEdit v-if="showEditDialog"></PolicyPayEdit>
    <PolicyPayDetail v-if="showDetailDialog"></PolicyPayDetail>
  </div>
</template>

<script>
  import policyPayAPI from "../../../js/production/policypay/policyPayAPI";
  import Utils from"../../../js/production/utils";
  import PolicyPayAdd from "./dialog/PolicyPayAdd";
  import PolicyPayEdit from "./dialog/PolicyPayEdit";
  import PolicyPayDetail from "./dialog/PolicyPayDetail";
  export default {
    components: {
      PolicyPayAdd,
      PolicyPayEdit,
      PolicyPayDetail
    },
    data () {
      return {
        formData: {
          currentPage: 1,
          pageSize: 15,
          riskcode: '',
          orderBy: '',
          order: '',
        },
        tableData: [],
        selectedRows: [],
        total: 0,
        showAddDialog: false,
        showEditDialog: false,
        showDetailDialog: false,
        showLogDialog: false,
        rowDetail: {},
        tableHeight: 0,
        loading: false,
      }
    },
    mounted() {
      this.tableHeight = Utils.getScreenHeight() * 0.72;
      let vm = this;
      document.onkeydown = function (e) {
        if (e.keyCode == 13) {
          vm.queryData();
        }
      }
    },
    methods: {
      defaultFormater(row, column) {
        let status = row[column.property];
        switch (status) {
          case 'Y' :
          {
            return "是";
            break;
          }
          case 'N' :
          {
            return "否";
            break;
          }
        }
      },
      reset() {
        this.formData.riskcode = '';
        policyPayAPI.query(this);
      },
      handleSizeChange(val) {
        this.formData.pageSize = val;
        policyPayAPI.query(this);
      },
      handleCurrentChange(val) {
        this.formData.currentPage = val;
        policyPayAPI.query(this);
      },
      orderBy(column, prop, order) {
        if (typeof(column) != 'undefined') {
          this.formData.orderBy = column.prop;
          if (column.order == 'descending') {
            this.formData.order = 'desc';
          } else {
            this.formData.order = 'asc';
          }
        }
        if (this.isSortRequest) {
          this.isSortRequest = false;
          policyPayAPI.query(this);
        }
      },
      rowSelected(rows) {
        this.selectedRows = rows;
      },
      rowSelete(row) {
        this.$refs.multipleTable.toggleRowSelection(row);
      },
      deleteData() {
        policyPayAPI.delete(this);
      },
      queryData() {
        policyPayAPI.query(this);
      },
      openAddDialog() {
        policyPayAPI.openAddDialog(this);
      },
      openEditDialog() {
        policyPayAPI.openEditDialog(this);
      },
      showDetail(row, event) {
        this.rowDetail = row;
        this.showDetailDialog = true;
      },
    }
  }
</script>
